//获取DOM元素
var oliList = document.getElementsByTagName("li");
var oman = document.getElementById("man");
var obtnYes = document.getElementById("btnYes");
var oUl = document.getElementById("vip");



//添加随机人员
var names = [
    "刘韵致",
    "王可昕",
    "齐静怡",
    "李金沛",
    "魏仟贺",
    "张涛",
    "杨闯杰",
    "党西博",
    "丁磊",
    "柴时凯",
    "李瑞杰",
    "张豪杰",
    "张军轶",
    "陈晨",
    "霍俊伟",
    "高磊",
    "韩冰",
    "张丹权",
    "张维鹏",
    "张茂森",
    "谢冰松",
    "高泽彬",
    "余冠雄",
    "杨甜",
    "赵红帅",
    "卫国飞",
    "李永康",
    "王浩东",
    "王好好",
    "叶昊楠",
    "齐忠亚",
    "赵逸华",
    "崔全保",
    "刘思妤",
    "赵佳伟",
    "陆娜",
    "梁超",
    "陈春波",
    "张海燕",
    "朱国宁",
    "李博",
    "卜佳怡",
];


var t = 0;


//格式
function place() {
    for (var i = 0; i < 42; i++) {
        t = i * (360 / 42) + "deg";
        oliList[i].innerHTML = names[i];
        oliList[i].style.transform = "rotate(" + t + ") translate(360px)";

        var oSpan = document.createElement("span");
        //添加至页面 
        oSpan.innerHTML = "VIP!";
        oSpan.style.color = "#ac112c"
        oSpan.style.cursor = "pointer";
        oSpan.style.textAlign = "lift";
        oliList[i].appendChild(oSpan);

    }

}
place();
//随机度数
function fun() {
    var num = Math.round((Math.random() * 43));
    return num * (360 / 42) + 180;
}
//旋转事件
var myDeg = 0;
obtnYes.onmousedown = function () {
    myDeg = myDeg + fun();
    oman.style.transitionDuration = "3s";
    obtnYes.style.boxShadow = "none";
    console.log(myDeg);
    oman.style.transform = "rotateZ(" + myDeg + "deg)";
}
obtnYes.onclick = function () {
    btnYes.style.boxShadow = "2px 2px 5px black";
}

//VIP列表
for (var i = 0; i < oliList.length; i++) {
    oliList[i].lastElementChild.onclick = function () {
        var oVip = document.createElement("li");
        oVip.innerHTML = this.parentElement.innerHTML;
        oVip.style.height = "20px";
        oVip.style.border = "1px solid #FFFFFF";
        oUl.appendChild(oVip);
    }
}